<!-- head -->
<style>
    .multi-child:not(:first-child) {
        margin-top: -50px;
    }
</style>
<div class="div1 div2">
    <div class="head">
        <div class="left">
            <a href="/en">
                <!-- <img src="/static/logo_c.svg" alt="" class="logo1"> -->
                <!-- <img src="/static/logo_b.svg" alt="" class="logo2"> -->
                <img src="/static/images/logo_c.png" alt="" class="logo1">
                <img src="/static/images/logo_b.png" alt="" class="logo2">
            </a>
        </div>
        <div class="right">
            <ul>
                <li><a href="/en" class="a">Home</a> </li>
                {foreach $categories as $menu}
                <li>
                    <a href="/en{$menu.url}" title="{$menu.name_en}" class="a">{$menu.name_en}</a>
                    {notempty name="menu.child"}
                    <div class="last-nav" style="width: 300px;">
                        {foreach $menu.child as $childmenu}
                        {notempty name="childmenu.child"}
                        <div class="multi-child" style="border-top: 1px solid silver;width: 100%; height: 100%;">
                            <div class="left" style="width: 40%;position: relative;height: 100%;transform:translateY(50%);"><a>{$childmenu.name_en}</a></div>
                            <div class="reight" style="width: 50%;position: relative;left: 40%;top: -50px;">
                                {foreach $childmenu.child as $child}
                                <a href="/en{$childmenu.url}">{$child.name_en}</a>
                                {/foreach}
                            </div>
                        </div>
                        {else/}
                        <p><a href="/en{$childmenu.url}">{$childmenu.name_en}</a></p>
                        {/notempty}
                        {/foreach}
                    </div>
                    {/notempty}
                </li>
                {/foreach}
                <li>
                    <a class="a" target="_self" href="/en/contactus.html">Contact Us</a>
                </li>
            </ul>
            <div class="op">
                <a href="/en/search.html?key=" class="search fa fa-search"></a>
                <div class="lang">
                    <img src="/static/images/dh_dt.gif" alt="">
                    <a href="/">CN</a>
                    <!-- <a href="/en">EN</a> -->
                    <!-- <a href="/ru">RU</a> -->
                </div>
            </div>
        </div>
        <!-- 手机导航 -->
        <button type="button" class="drawer-toggle drawer-hamburger"> <span
                class="drawer-hamburger-icon"></span></button>
        <nav class="drawer-nav" role="navigation">
            <div class="lang"
                style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
                <a href="/en">EN</a>
            </div>
            <ul class="drawer-menu">
                <li><a class="drawer-menu-item" href="/en">Home</a></li>
                {foreach $categories as $menu}
                {notempty name="menu.child"}
                <li class="drawer-dropdown"><a class="drawer-menu-item" href="javascript:;" data-toggle="dropdown"
                        role="button" aria-expanded="false">{$menu.name_en}<span class="drawer-caret"></span></a>
                    <ul class="drawer-dropdown-menu">
                        {foreach $menu.child as $childmenu}
                        <li><a class="drawer-dropdown-menu-item" href="/en{$childmenu.url}" title="1">{$childmenu.name_en}</a>
                        </li>
                        {/foreach}
                    </ul>
                </li>
                {else/}
                <li class="drawer-dropdown"><a href="/en{$menu.url}" title="{$menu.name_en}">{$menu.name_en}</a></li>
                {/notempty}
                {/foreach}
                <li class="drawer-dropdown">
                    <a class="drawer-menu-item" target="_self" href="/en/contactus.html" data-wpel-link="internal">Contact Us</a>
                </li>
            </ul>
        </nav>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //手机 锚点定位
        $(".drawer-menu li .drawer-dropdown-menu li .drawer-dropdown-menu-item").click(function () {
            $(".drawer--right.drawer-open .drawer-hamburger").trigger("click");
        })

        patch()
        //导航
        window.onscroll = function () {
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            localStorage.setItem('scrollTop', t)
            if (t >= 200) {
                $(".div1").addClass("div2")
            } else {
                $(".div1").removeClass("div2")
            }
        }

        //patch
        function patch() {
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            if (t >= 200) {
                $(".div1").addClass("div2")
            } else {
                $(".div1").removeClass("div2")
            }
        }
    })
</script>